<template>
  <!-- 导航栏 -->
  <view class="uni-nav-bar"
        :style="{ paddingTop: `${navigationBarHeight.navbar}px` }">
    <uni-nav-bar :title="navbarTitle"
                 :leftText="leftText"
                 :leftIcon="leftIcon"
                 :leftIconColor="leftIconColor"
                 :rightText="rightText"
                 :rightIcon="rightIcon"
                 :backgroundColor="bgColor"
                 :titleStyle="{ color: titleColor, fontSize: '38rpx', fontWeight: 700 }"
                 :fixed="fixed"
                 :autoBack="autoBack"
                 @clickLeft="leftClick"
                 :placeholder="true"
                 :border="isBorder">
    </uni-nav-bar>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Navbar",
  props: {
    // 导航栏标题
    navbarTitle: {
      type: String,
      default: "",
    },
    // 左边的提示文字
    leftText: {
      type: String,
      default: "",
    },
    // 左边的图标
    leftIcon: {
      type: String,
      default: "left",
    },
    // 右边的图标 只能是uview 自带图标 如 more-dot-fill
    rightIcon: {
      type: String,
      default: "",
    },
    // 右边的提示文字
    rightText: {
      type: String,
      default: "",
    },
    // 导航栏是否固定在顶部
    fixed: {
      type: [Boolean, String],
      default: false,
    },
    // 是否有border
    isBorder: {
      type: [Boolean, String],
      default: false,
    },
    // 高度
    height: {
      type: [Number, String],
      default: "42px",
    },
    // 点击左侧区域(返回图标) 返回上一页
    autoBack: {
      type: [Boolean, String],
      default: true,
    },
    // title颜色
    titleColor: {
      type: String,
      default: "#fff",
    },
    // 左侧返回图标的颜色
    leftIconColor: {
      type: String,
      default: "#333",
    },
    bgColor: {
      type: String,
      default: "#fff",
    },
  },
  computed: {
    ...mapState({
      navigationBarHeight: (state) => state.navigationBarHeight,
    }),
  },
  methods: {
    leftClick () {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>
